<template>
  <section style="margin-top: 2%">
    <b-steps type="is-info" :has-navigation="false" v-model="activeStep">
      <b-step-item label="初始化" icon="account-key">
        <Step1 @parent='StepOneParms'></Step1>
      </b-step-item>
      <b-step-item label="调整颜色" icon="account">
        <Step2 v-if="activeStep == 1" />
      </b-step-item>
      <b-step-item label="调整风格" icon="account-plus">
        <Step3  v-if="activeStep == 2" />
      </b-step-item>
      <b-step-item label="生成过程" icon="account-plus">
        <Step4  v-if="activeStep == 3"  />
      </b-step-item>
      <template #navigation="{ next }" v-if="activeStep != 3">
        <b-button
          outlined
          type="is-success"
          icon-pack="fas"
          :disabled="next.disabled"
          @click.prevent="next.action"
        >
        确认选择
        </b-button>
      </template>
    </b-steps>
  </section>
</template>
<script>
import Step1 from "../components/Step1.vue";
import Step2 from "../components/Step2.vue";
import Step3 from "../components/Step3";
import Step4 from "../components/Step4";
export default {
  name: "Choose1",
  components: { Step1, Step2 ,Step3, Step4},
  data() {
    return {
      StepOneData:[],
      parm:[0,0],
      activeStep :0,
    };
  },
  methods:{
    StepOneParms(data){
      this.parm[0]=data[0];
      this.parm[1]=data[1];
      console.log(this.parm)
    },
  },
  watch :{
    activeStep(val){
      console.log("step",val)
    }
  }
};
</script>
<style scoped>
</style>
